<template>
  <div class="inline">
    <el-button class="filter-item" type="success" @click="selectServer">服务器({{ serverSelect }})</el-button>
    <el-dialog :visible.sync="dialogVisible" title="选择服务器" :close-on-click-modal="false">
      <el-checkbox v-model="allServerChecked" @change="checkAllServer">显示全服</el-checkbox>
      <div class="server-box">
        <ul class="menu-sub">
          <li
            v-for="(sgit,index) in groupList"
            :key="index"
          >
            <el-checkbox
              v-model="sgit.flag"
              :indeterminate="itemIndeterminate(sgit)"
              @change="(val) => handleCheckAll(val, sgit)"
            >{{ sgit.sgname }}</el-checkbox>
            <el-checkbox-group
              v-model="selectedData"
              style="padding-left: 30px;"
              @change="handleChanges(sgit)"
            >
              <el-checkbox
                v-for="sgits in sgit.children"
                :key="sgits.sid"
                :label="sgits.sid"
              >{{ sgits.name }}</el-checkbox>
            </el-checkbox-group>
          </li>
        </ul>
      </div>
      <div class="tr">
        <el-button type="primary" @click="confirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getServerListGroup } from '@/api/ops'

export default {

  data() {
    return {
      loading: false,
      serverSelect: '全部',
      allServerChecked: false,
      selectedData: [],
      serverSelectedData: [],
      groupList: [],
      dialogVisible: false
    }
  },
  created() {
  },
  methods: {
    selectServer() {
      this.dialogType = 'server'
      this.dialogVisible = true
      this.selectedData = this.serverSelectedData
      this.serverListGroup(false)
    },

    confirmSubmit() {
      if (this.dialogType === 'server') {
        this.serverSelectedData = this.selectedData
        this.$emit('server-selected', this.selectedData)
        if (this.selectedData.length > 0) this.serverSelect = '已选择'
      }
      this.dialogVisible = false
    },

    async serverListGroup(val) {
      getServerListGroup({ all: val }).then(res => {
        this.groupList = res.data
      })
    },

    // 全选
    handleCheckAll(val, item) {
      // 过滤掉没有选中的数据，item.child中不包含v时返回-1
      const next = item.children.map(item => item.sid)
      const filterArr = this.selectedData.filter(
        (v) => next.indexOf(v) === -1
      )
      this.selectedData = val ? filterArr.concat(next) : filterArr
    },
    itemIndeterminate(item) {
      const infoLists = item.children.map(ite => ite.sid)
      return (
        infoLists.some((v) => this.selectedData.indexOf(v) > -1) &&
        !infoLists.every((v) => this.selectedData.indexOf(v) > -1)
      )
    },
    // 勾选变化方法
    handleChanges(val) {
      const infoLists = val.children.map(ite => ite.sid)
      infoLists.every((v) => {
        if (this.selectedData.indexOf(v) > -1) {
          val.flag = true
        } else {
          val.flag = false
        }
      })
    },
    checkAllServer() {
      this.serverListGroup(this.allServerChecked)
    }
  }
}
</script>
